@()(implicit request: RequestHeader)
	@main("TCDB注释(转运蛋白分类)")("tcdb") {

		<div class="page-content">

			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa "></i>
						<a href="">TCDB注释(转运蛋白分类)</a>
					</li>
				</ul>
			</div>


			<div class="row-fluid">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-madison box">
							<div class="portlet-title">
								<div class="caption">
									TCDB注释(转运蛋白分类)
									<a target="_blank" href="http://www.tcdb.org/" style="color: white"><span class="fa fa-question-circle"></span></a>
								</div>
							</div>

							<div class="portlet-body">

								<form class="registration-form form-horizontal" id="form"
								accept-charset="UTF-8" method="post">

									<div class="form-group">
										<label class="control-label col-sm-2">任务名:</label>
										<div class="col-sm-3">
											<input class="form-control" name="missionName" onfocus="inputSelect(this)">
										</div>

									</div>

									<div class="form-group">
										<label class="control-label col-sm-2">Type of query:</label>
										<div class="col-sm-3">
											<select class="form-control" onchange="change(this)" name="method">
												<option selected value="text">Text</option>
												<option value="file">File</option>
											</select>
										</div>
									</div>

									<div class="form-group" id="queryContent">
										<label class="control-label col-sm-2">Query text:<br>(核酸序列)</label>
										<div class="col-sm-8">
											<textarea class="form-control monospace" name="queryText" id="queryText" rows="7"></textarea>
											<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egQuery">
												示例</em></a></span>
										</div>
									</div>

									<div id="queryFile" style="display: none;">
										<div class="form-group">
											<label class="control-label col-sm-2">Query fasta file:</label>
											<div class="col-sm-8">
												<input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
												data-show-upload="false" accept="fa,fasta">
											</div>
										</div>
									</div>

									<div class="form-group" style="display: none">
										<label class="control-label col-sm-2">序列类型:</label>
										<div class="col-sm-3">
											<select class="form-control" name="seqType">
												<option value="n" selected>nucleic acid</option>
												<option value="p" >Protein</option>
											</select>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label col-sm-2">Evalue:</label>
										<div class="col-sm-2">
											<input class="form-control" name="evalue" id="evalue" value="1e-5">
										</div>

										<label class="control-label col-sm-2">Max target seqs:</label>
										<div class="col-sm-2">
											<input class="form-control" name="maxTargetSeqs" id="mCharacteristic" value="5">
										</div>

									</div>

									<div class="form-group">
										<div class="actions col-sm-offset-2 col-sm-2">
											<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="TcdbAnno.myRun">
												运行</button>
										</div>

										<div class="actions  col-sm-2">
											<button type="reset" class="btn btn-primary" style="width: 90%;">
												重置</button>
										</div>
									</div>

								</form>

							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row-fluid">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-madison box">
							<div class="portlet-title">
								<div class="caption">
									分析结果
								</div>
							</div>

							<div class="portlet-body">

								<div class="table-responsive">

									<table class="display table table-bordered" id="missionTable" data-pagination="true" data-search="true"
									data-toolbar="#toolbar" data-page-list="[5, 10, all]" data-page-size="5" data-multiple-search="true">
										<thead>
											<tr>
												<th data-field="missionName" data-sortable="true">任务名</th>
												<th data-field="args" data-sortable="true" data-formatter="genome.argsFmt">
													参数</th>
												<th data-field="state" data-sortable="true"
												data-formatter="Genome.stateFmt"
												>状态</th>
												<th data-field="startTime" data-sortable="true">开始时间</th>
												<th data-field="endTime" data-sortable="true">结束时间</th>
												<th data-field="operate" data-formatter="genome.operateFmt">操作</th>
											</tr>
										</thead>
									</table>
								</div>

							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="row-fluid" id="result" style="display: none">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-madison box">
							<div class="portlet-title">
								<div class="caption" id="missionResult">
									TCDB注释结果展示(<span id="missionName"></span>)
								</div>
							</div>

							<div class="portlet-body">

								<div id="resultContent">

									<label>显示的列:</label>
									<div id="checkbox" class="checkbox">

									</div>

									<div class="table-responsive" id="tableContent">
										<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
										data-toolbar="#toolbar" data-page-list="[5, 10, all]" data-page-size="5" data-multiple-search="true"
										data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
										>
											<thead>
												<th data-field='geneId' data-sortable='true' id="marker">Query-Name</th>
											</thead>
										</table>

									</div>

								</div>

							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<script>
				var originalHtml = ""
				var kind = "tcdb"
				$(function () {
				    TcdbAnno.init

					var wsUri = "ws://" + window.location.host +"@routes.GenomeController.updateMissionSocket("tcdb")"
					genome.testWebSocket(wsUri);
					originalHtml = $("#tableContent").html()
				})

				function showResult(id) {
					showId = id
					var index = layer.load(1, {
						shade: [0.1, '#fff']
					});
					$.ajax({
						url: "@routes.GenomeController.tcdbResult()?missionId=" + id,
						type: "get",
						dataType: "json",
						success: function (data) {
							layer.close(index)
							refreshContent(data)
							$("#result").show()
							var target_top = $("#missionResult").offset().top
							$("html,body").animate({scrollTop: target_top}, 800)
						}
					})
				}

				function setColumns(value) {
					var element = $("input:checkbox[value='" + value + "']")
					if (element.is(":checked")) {
						$('#table').bootstrapTable('showColumn', value);
					} else {
						$('#table').bootstrapTable('hideColumn', value);
					}
				}

				function change(element) {
					var value = $(element).find(">option:selected").val()
					if (value == "text") {
						$("#queryContent").show()
						$("#queryFile").hide()
					} else {
						$("#queryContent").hide()
						$("#queryFile").show()
					}
				}

				$('#egQuery').click(function () {
					var eg = ">Scaffold1\n" +
							"TAACCGCAACTATGGCCCGCACTCGGCCATTATGGCGGGATTCAGCCATGTGACCGGCGA\n" +
							"TCTGATTATTACCCTTGATGCCGACCTGCAAAACCCACCGGAAGAGATCCCGCGCCTGGT\n" +
							"GGCGAAGGCGGACGAAGGTTACGACGTGGTCGGTACCGTTCGGCAGAACCGCCAGGACAC\n" +
							"CTTCTTCCGTAAAAGCGCGTCGAAGATGATCAACCGCCTGATTCAGCGCACCACCGGTAA\n" +
							"AGCGATGGGGGACTACGGCTGCATGCTGCGCGCCTATCGCCGCCACATTATCGACGCGAT\n" +
							"GCTCAATTGCCATGAACGCAGTACGTTTATCCCGATTCTGGCAAATACCTTCGCGCGCCG\n" +
							"GGCGGTCGAAATCCCGGTGATGCACGCGGAGCGTGAATTTGGCGATTCCAAATACAGCTT\n" +
							"TATGCGCCTGATTAATCTGATGTACGACCTGGTGACCTGTTTGACCACCACGCCGCTGCG\n" +
							"TCTGCTGAGCGTCTTTGGCAGCGTGATTGCCCTGCTGGGCTTCGCTTTCGCCTTCCTGCT\n" +
							"GGTG\n"

					$('#queryText').val(eg);
					$("#form").bootstrapValidator("revalidateField", "queryText")
				});

				function refreshContent(data) {
					var checkboxHtml = ""

					$.each(data.columnNames, function (i, v) {
						checkboxHtml += "<label style='margin-right: 15px'>" +
								"<input type='checkbox' checked='checked' value='" + v + "' onclick=\"setColumns('" + v + "')\">" + v +
								"</label>"
					})

					$("#checkbox").empty().append(checkboxHtml)
					var html = ""
					$.each(data.columnNames, function (i, v) {
						html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
					})
					$("#tableContent").empty().append(originalHtml)
					$("#marker").after(html)
					$('#table').bootstrapTable({
						data: data.array,
						exportOptions: {
							csvSeparator: "\t",
							fileName: 'tcdb.anno'
						},
						exportHiddenColumns: true
					});
					$.each(data.columnNames, function (n, value) {
								$('#table').bootstrapTable('hideColumn', value);
								$("input:checkbox[value='" + value + "']").attr("checked", false)
							}
					)
					var showColumns = ["E-Value", "Hit-Name", "Description"]
					$.each(showColumns, function (n, value) {
								$('#table').bootstrapTable('showColumn', value);
								$("input:checkbox[value='" + value + "']").prop("checked", "true")
							}
					)
				}


				$("#input-1").fileinput({
					showPreview: false,
				});

		</script>


	}
